<template>
  <view class="page">
    <view class="tips">您的账号存在多个角色，请选择登录的角色！</view>
    <u-form class="form" :model="userForm" :rules="rules" ref="uForm" label-position="left">
      <u-form-item label="角色" prop="roleId" label-width="180" required>
        <js-select v-model="userForm.roleId" :items="roleList" itemLabel="roleName" itemValue="id"
          placeholder="请选择角色"></js-select>
      </u-form-item>
    </u-form>
    <view class="form-footer">
      <view class="form-button" @click="submit">切换角色</view>
    </view>
  </view>
</template>
<script>
  import {
    validatenull
  } from '@/common/validate.js'
  export default {
    data() {
      return {
        userForm: {
          roleId: ''
        },
        roleList: [],
        rules: {
          roleId: [{
            required: true,
            message: '请选择角色',
            trigger: ['change', 'blur'],
          }]
        },
      };
    },
    onLoad: function(param) {
      this.selectRole();
    },
    onReady(param) {
      this.$refs.uForm.setRules(this.rules);
    },
    methods: {
      selectRole() {
        let params = {}
        params.userId = this.vuex_userId
        this.$u.api.role.selectRole(params).then(res => {
          this.roleList = res.data;
        })
      },
      submit() {
        this.$refs.uForm.validate(valid => {
          let this_ = this;
          if (valid) {
            uni.showLoading({
              title: '切换中....'
            })
            this_.$u.api.refreshToken({
              tenant_id: this_.vuex_config.tenantId,
              refresh_token: this_.vuex_refreshToken,
              grant_type: 'refresh_token',
              scope: "all",
            }, {
              'Role-Id': this_.vuex_config.switchMode ? this_.userForm.roleId : ''
            }).then(res => {
              if (res.access_token) {
                this_.setToken(this_, res);
                this_.goPage();
                // uni.showModal({
                // 	title: '提示',
                // 	content: "切换成功！",
                // 	showCancel: false,
                // 	success: function() {
                // 		this_.goPage();
                // 	}
                // });
                this_.setPermission(this_);
              } else if (res.error) {
                uni.showToast({
                  title: res.error_description,
                  duration: 2000
                });
              } else {
                uni.showToast({
                  title: "未连接到服务器！",
                  duration: 2000
                });
              }
            });
            uni.hideLoading()
          } else {
            this_.$u.toast('请选择角色');
          }
        });
      },
      cancel() {
        uni.navigateBack();
      }
    }
  };
</script>
<style lang="scss">
  .page {
    height: 100vh;
    padding: 32rpx;
    background: #f7f7f7;
  }

  .tips {
    margin-bottom: 24rpx;
    font-size: 28rpx;
    font-weight: 500;
    color: #1676FE;
  }

  .u-form-item {
    padding: 16rpx 32rpx;
    border-radius: 8rpx;
    margin-bottom: 24rpx;
    background: #fff;

    &::after {
      display: none;
    }
  }

  .form-footer {
    margin-top: 160rpx;
  }

  .form-button {
    border-radius: 96rpx;
    line-height: 96rpx;
    text-align: center;
    font-weight: 500;
    font-size: 32rpx;
    color: #FFF;
    background: #3989FC;
  }
</style>